<template>
  <px-dialog v-model="visible" width="1200" title="事件处理信息" @close="cancel">
    <div v-loading="loading" class="container">
      <div class="container-left">
        <px-timeline class="time-line">
          <px-timeline-item v-for="item in eventLineList" :key="item" :timestamp="item.handlerTime">
            <p>{{ formatEventType(item.eventType) }}</p>
            <p class="handler">{{ item.handlerName }}</p>
          </px-timeline-item>
        </px-timeline>
      </div>
      <div class="container-right">
        <div v-for="item in eventLineList" :key="item">
          <div class="title">{{ formatEventType(item.eventType) }}</div>
          <!-- 发起整改 -->
          <px-descriptions v-if="item.eventType === 'S'" :column="1" border class="content-bar">
            <px-descriptions-item label="问题说明">
              {{ item.questionState }}
            </px-descriptions-item>
            <px-descriptions-item label="整改要求">
              {{ item.opinion }}
            </px-descriptions-item>
          </px-descriptions>

          <!-- 关闭事件 -->
          <px-descriptions v-if="item.eventType === 'C'" :column="1" border class="content-bar">
            <px-descriptions-item label="关闭原因">
              {{ item.opinion }}
            </px-descriptions-item>
            <px-descriptions-item label="附件">
              <div v-for="j in item.files" :key="j?.fileKey" class="file-wrap" @click="filePreview(j)">
                <div class="file-name">{{ j?.name }}</div>
                &nbsp;;&nbsp;&nbsp;
              </div>
            </px-descriptions-item>
            <px-descriptions-item label="照片">
              <px-image
                v-for="img in item.images"
                :key="img"
                style="width: 50px; margin-right: 16px"
                :preview-src-list="[img?.fileKey]"
                :src="img?.fileKey"
              />
            </px-descriptions-item>
          </px-descriptions>

          <!-- 整改 -->
          <px-descriptions v-if="item.eventType === 'M'" :column="1" border class="content-bar">
            <px-descriptions-item label="整改结果">
              {{ item.opinion }}
            </px-descriptions-item>
            <px-descriptions-item label="附件">
              <div v-for="j in item.files" :key="j?.fileKey" class="file-wrap" @click="filePreview(j)">
                <div class="file-name">{{ j?.name }}</div>
                &nbsp;;&nbsp;&nbsp;
              </div>
            </px-descriptions-item>
            <px-descriptions-item label="照片">
              <px-image
                v-for="img in item.images"
                :key="img"
                style="width: 50px; margin-right: 16px"
                :preview-src-list="[img?.fileKey]"
                :src="img?.fileKey"
              />
            </px-descriptions-item>
          </px-descriptions>

          <!-- 审核 -->
          <px-descriptions v-if="item.eventType === 'A' || item.eventType === 'R'" :column="1" border class="content-bar">
            <px-descriptions-item label="审核意见">
              {{ item.opinion }}
            </px-descriptions-item>
          </px-descriptions>
        </div>
      </div>
    </div>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import { getEventLineAPI, previewAPI } from "@/api/energy/monitor";
import { formatEventType } from "@/views/common/energy/monitor/monitorEvent/utils";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:visible"]);

const state = reactive({
  loading: false,
  eventLineList: []
});
const { loading, eventLineList } = toRefs(state);

onMounted(() => {
  getEventLineData();
});

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const cancel = () => {
  emits("update:visible", false);
};

const getEventLineData = async () => {
  try {
    state.loading = true;
    const params = {
      id: props.rowData.id
    };
    const res = await getEventLineAPI(params);
    state.eventLineList = res.timeline;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const filePreview = async (fileData, fileType) => {
  if (fileData.fileKey) {
    window.open(fileData.fileKey);
  }
  // const params = {
  //   name: fileData.name,
  //   fileKey: fileData.fileKey
  // };
  // const res = await previewAPI(params);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 660px;

  .container-left {
    width: 400px;
    height: 100%;
    padding: 8px;
    overflow-y: auto;
    // background: #f7f7f7;
    border: 1px solid #dfdfdf;
    border-radius: 4px;

    .time-line {
      margin-top: 16px;
      margin-left: 16px;
    }
  }

  .container-right {
    width: calc(100% - 400px);
    height: 100%;
    padding: 8px;
    overflow-y: auto;
  }
}

.handler {
  font-size: 14px;
  color: #999;
}

.title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  // background: #ebf2fe;
  // border-radius: 4px;
  // padding: 8px;
}

.content-bar {
  margin-bottom: 16px;
}

.file-wrap {
  display: inline-block;
}

.file-name {
  display: inline-block;
  color: #3b82f6;
  cursor: pointer;
}

:deep(.px-descriptions__label) {
  width: 100px;
}
</style>
